<template>
  <div class="nav">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
        :ellipsis="false">
      <el-menu-item>
        <img style="width: 50px; vertical-align: middle;" src="@/assets/task-logo.png" alt="task logo"/>
      </el-menu-item>

      <div class="flex-grow"/>

      <el-menu-item index="0" :route="{name: 'home'}">任务中心</el-menu-item>
      <el-menu-item index="1" v-if="currentUser.is_staff" :route="{name: 'task-center'}">学生中心</el-menu-item>
      <el-menu-item index="2" v-if="currentUser.is_staff" :route="{name: 'task-extra'}">任务精讲</el-menu-item>
      <el-menu-item index="3" v-if="currentUser.is_staff" :route="{name: 'group'}">人员组管理</el-menu-item>
      <el-menu-item index="5" v-if="currentUser.is_staff" :route="{name: 'clazz'}">班级管理</el-menu-item>
      <el-menu-item index="6" v-if="currentUser.is_staff" :route="{name: 'stage'}">阶段管理</el-menu-item>
      <el-menu-item index="7" v-if="currentUser.is_staff" :route="{name: 'module'}">模块管理</el-menu-item>
      <el-sub-menu index="8">
        <template #title>
          <el-icon>
            <Avatar/>
          </el-icon>
          <span style="margin-left:4px;">{{ currentUser.name }}</span>
        </template>
        <el-menu-item @click="switchClazz">切换班级</el-menu-item>
        <el-menu-item @click="modifyPwd">修改密码</el-menu-item>
        <el-menu-item index="8-3" :route="{name: 'login'}">退出登录</el-menu-item>
      </el-sub-menu>
    </el-menu>

  </div>
</template>

<script>
import Token from '@/api/token.js' ;

export default {
  props: {
    activeIndex: {
      type: [String, Number],
      required: false,
      default: "0",
    }
  },
  methods: {
    switchClazz() {
      this.$layer.open({
        type: 2,
        title: '切换班级',
        shadeClose: true,
        shade: 0.5,
        area: ['650px', '300px'],
        btn: ['保存', '关闭'],
        content: '/clazz/switch',
        yes: (index, layero) => {
          layer.close(index);
        }
      })
    },
    modifyPwd() {
      this.$layer.open({
        type: 2,
        title: '修改密码',
        shadeClose: true,
        shade: 0.5,
        area: ['680px', '320px'],
        btn: ['保存', '关闭'],
        content: '/modify-pwd',
        yes: (index, layero) => {
          layer.close(index);
        }
      })
    }
  },
  data() {
    return {
      currentUser: Token.getUser(),
    }
  }
}
</script>

<style scoped>

.nav {
  width: 100%;
  background-color: #545c64;
  min-width: var(--max-width);
}

.el-menu {
  width: var(--max-width);
  margin: 0 auto;
}

.flex-grow {
  flex-grow: 1;
}

.form-control {
  padding: 30px 30px 10px;
}
</style>

